<script lang="ts" setup>
import { Cell, CellGroup } from 'vant'

type Pair = [string, string]
type PairWithNullCb = [string, string, null]
type PairWithCb = [string, string, (index: number) => void]
const props = defineProps<{
  pairs: (null | Pair | PairWithCb | PairWithNullCb)[]
}>()

const _pairs = computed(() => props.pairs.filter(x => x !== null)) as ComputedRef<(Pair | PairWithCb | PairWithNullCb)[]>

function handleClick(i: number) {
  const pair = _pairs.value[i]
  const cb = pair[2]
  if (cb) {
    cb(i)
  }
}
</script>

<template>
  <CellGroup mb2>
    <Cell
      v-for="(item, index) in _pairs"
      :key="index"
      :title="item[0]"
      :value="item[1]"
      :placeholder="item[0]"
      :is-link="!!item[2]"
      @click="handleClick(index)"
    />
  </CellGroup>
</template>

<style scoped>
.clickable {
  background-color: dodgerblue;
}
</style>
